<template>
  <div class="mb120">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed title="购物车" />
    <!-- 商品列表 -->
    <div class="cart-list">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="cart-item" v-for="item in cartList" :key="item.id">
          <van-swipe-cell>
            <van-card
              :price="item.price"
              :desc="item.attrs"
              :title="item.goodsname"
              class="goods-card"
              :thumb="$baseUrl + item.img"
            >
              <template #thumb>
                <van-checkbox
                  style="float: left"
                  shape="round"
                  v-model="item.status"
                  @change="cartUpdate(item)"
                />
                <br />
                <img
                  @click="goGoodsDetail(item.id)"
                  v-lazy="$baseUrl + item.img"
                  style="height: 80px; width: 80px; margin-top: 10px"
                />
              </template>
              <template v-slot:footer>
                <van-stepper v-model="item.num" @change="cartUpdate(item)" />
              </template>
            </van-card>
            <template #right>
              <van-button
                @click="delGoods(item.id)"
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
              <van-button
                @click="goGoodsDetail(item.goodsid)"
                square
                text="查看"
                type="primary"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-pull-refresh>
    </div>
    <van-empty v-if="cartList.length === 0" description="暂无购物车数据" />

    <!-- 购物车信息 -->
    <van-submit-bar
      type="primary"
      :price="cartPrice"
      button-text="提交订单"
      tip-icon="info-o"
      @submit="() => {}"
    >
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
  
<script>
import { storeToRefs } from "pinia";
import useCartStore from "@/store/cartStore";
import { ref, computed, inject, onMounted } from "vue";
import { showConfirmDialog, showToast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const cartStore = useCartStore();
    const { getCartList, cartDelAction, updateAllChecked } = cartStore;
    const { cartList, cartPrice, originAllChecked } = storeToRefs(cartStore);
    const isLoading = ref(false);
    const axios = inject("axios");
    // 查看商品详情
    const goGoodsDetail = (id) => {
      router.push({
        name: "goods",
        query: {
          id,
        },
      });
    };
    const onRefresh = () => {
      // 重新请求当前页面数据
      getCartList(() => {
        // 关闭下拉刷新loading效果
        isLoading.value = false;
      });
    };

    // 更新商品状态和数量
    const cartUpdate = ({ id, num, status }) => {
      // true=>1, false=>0
      status = status ? 1 : 0;
      axios.post("/cartedit", { id, num, status }).then((res) => {
        if (res.code === 200) {
          showToast(res.msg);
        }
      });
    };
    // 删除购物车商品
    const delGoods = (id) => {
      // console.log(id);
      showConfirmDialog({
          title: "提示",
          message: "确认删除?",
          theme: "round-button",
        })
        .then(() => {
          cartDelAction(id);
        })
        .catch(() => {});
    };
    // 计算属性
    const allChecked = computed({
      get: function () {
        return originAllChecked.value;
      },
      set(value) {
        // 更新全选复选框的状态
        updateAllChecked(value);
      },
    });

    onMounted(() => {
      getCartList();
    });
    return {
      isLoading,
      cartList,
      cartPrice,
      originAllChecked,
      allChecked,
      goGoodsDetail,
      onRefresh,
      cartUpdate,
      delGoods,
    };
  },
};
</script>
  
<style scoped lang="scss">
.van-card {
  background-color: #fff;
}

.van-checkbox {
  margin: 0 10px;
}

.delete-button {
  height: 100%;
}

.cart-list {
  margin-top: 48px;
  margin-bottom: 120px;
}

.van-submit-bar {
  bottom: 50px;
}
</style>